

<template>
    <div class="right-top " ref="right1">

    </div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, ref } from 'vue';

let arr1 = [5, 22, 150, 54, 1, 230, 4, 1]
let arr2 = [10, 150, 1, 250, 20, 100, 10, 150]
let arr3 = [100, 2, 160, 1, 200, 30, 101, 40]
let myChart = null
let right1 = ref(null)
let initOptions = () => {
    myChart = echarts.init(right1.value)
    myChart.setOption({
        title: {
            text: '订单销售统计',
            textStyle: {
                fontSize: '20',
                color: 'white',
            },
            left: '40%',
            top: "5%"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {

            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',

                data: ['2020.06.15', '2020.06.16', '2020.06.17', '2020.06.18', '2020.06.19', '2020.06.20', '2020.06.21'],
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: '#eee'
                },
                axisLine: { onZero: false }
            }
        ],
        yAxis: [
            {

                type: 'value',
                min: 0,
                max: 300,
                // splitNumber: 5, 
                interval: 60,
                axisLabel: {
                    color: '#eee'
                },
                axisLine: { onZero: false }
            }
        ],
        series: [
            {
                name: '销售订单',
                data: [5, 22, 150, 54, 1, 230, 4, 1],
                type: 'line',
                barWidth: 22,

                itemStyle: {
                    color: 'lightcoral'
                },
            },
            {
                name: '退货订单',
                data: [10, 150, 1, 250, 20, 100, 10, 150],
                type: 'line',
                barWidth: 22,

                itemStyle: {
                    color: 'green'
                },
            },
            {
                name: '折扣订单',
                data: [100, 2, 160, 1, 200, 30, 101, 40],
                type: 'line',
                barWidth: 22,

                itemStyle: {
                    color: '#409eff'
                },
            },

        ],
        legend: {
            left: '25%',
            top: '14%',
            // 图例间隔
            itemGap: 20,
            // 图标形状
            icon: 'quare',
            color: 'white',
            textStyle: {
                color: '#eee'
            }
        },
    });
}

onMounted(() => {
    initOptions()
})
</script>
<style scoped lang='scss'>
.right-top {
    width: 100%;
    height: 100%;
}
</style>